import { ThemeProvider } from "@emotion/react"
import { BottomNavigation, BottomNavigationAction, Paper } from "@mui/material"
import { navigationActions } from "@entities/navigation/const/navigation-actions"
import { navigationTheme } from "@entities/navigation/ui/navigation.theme"

export const Navigation = () => {
    return (
        <ThemeProvider theme={navigationTheme}>
            <Paper>
                <BottomNavigation>
                    {navigationActions.map((action) => (
                        <BottomNavigationAction
                            label={action.label}
                            icon={action.icon}
                        />
                    ))}
                </BottomNavigation>
            </Paper>
        </ThemeProvider>
    )
}
